<template>
  <div id='home'>
    <tab-control :tabcontitle="tabcontitle" v-show="tabfixed" @tabconclick='tabconclick' ref="tabcontrol1"
      class="tabfixed">
    </tab-control>
    <home-nav-bar />
    <bscroll class="bscroll" @scroll="backtopscroll" ref="bscroll" :probeType="3" @pullingUp="pullingUp">
      <home-swiper :banner="banner"></home-swiper>
      <recommend :recommend="recommend"></recommend>
      <feature></feature>
      <tab-control :tabcontitle="tabcontitle" @tabconclick='tabconclick' ref="tabcontrol">
      </tab-control>
      <goods-list :goods="goods[tabcontrol].list"> </goods-list>
    </bscroll>
    <back-top @click.native="backtopclick" v-show="isshow"></back-top>
  </div>

</template>

<script>
  import HomeNavBar from './childcomps/HomeNavBar.vue'
  import HomeSwiper from './childcomps/homeSwiper.vue'
  import Recommend from './childcomps/recommend.vue'
  import Feature from './childcomps/feature'
  import TabControl from 'components/content/tabcontrol/TabControl.vue'
  import GoodsList from 'components/content/goodlist/GoodsList.vue'
  import Bscroll from 'components/common/BetterScroll/BScroll.vue'
  import BackTop from 'components/content/backtop/BackTop.vue'

  import { gethomeMultidata, getGoods } from 'network/home.js'
  import { debounce } from 'common/utils.js'
  import { newmixin } from 'common/mixins.js'
  export default {
    name: 'home',
    components: {
      HomeNavBar,
      HomeSwiper,
      Recommend,
      Feature,
      TabControl,
      GoodsList,
      Bscroll,
      BackTop,
    },
    mixins: [newmixin],
    data() {
      return {
        banner: {},
        recommend: [],
        tabcontitle: ['流行', '新款', '精选'],
        goods: {
          'pop': { page: 0, list: [] },
          'new': { page: 0, list: [] },
          'sell': { page: 0, list: [] }
        },
        tabcontrol: 'pop',


        isshow: false,
        tabfixed: false,
        scrollY: 0,

      }
    },

    created() {
      this.gethomeMultidata();
      this.getGoods('pop');
      this.getGoods('new');
      this.getGoods('sell');
    },
    mounted() {

    },
    // activated() {
    //   this.$refs.bscroll.scrollTo(0, this.scrollY)

    // },
    deactivated() {
      this.$bus.$off('goodimgload', this.itemimgload)
    },
    methods: {
      gethomeMultidata() {
        return gethomeMultidata().then(res => {
          this.banner = res.data.data.banner
          this.recommend = res.data.data.recommend.list
        })
      },
      getGoods(type, page) {
        page = this.goods[type].page + 1;
        return getGoods(type, page).then(res => {
          this.goods[type].list.push(...res.data.data.list)
          this.goods[type].page += 1
        })
      },
      tabconclick(index) {
        switch (index) {
          case 0:
            this.tabcontrol = 'pop'
            break;
          case 1:
            this.tabcontrol = "new"
            break;
          case 2:
            this.tabcontrol = "sell"
            break;
        }
        this.$refs.tabcontrol.currentindex = index
        this.$refs.tabcontrol1.currentindex = index

      },
      backtopclick() {
        this.$refs.bscroll.scrollTo(0, 0, 500)
      },
      backtopscroll(position) {
        this.isshow = (-position.y) >= 1500;
        if (this.$refs.tabcontrol !== undefined) {
          this.tabfixed = -position.y >= (this.$refs.tabcontrol.$el.offsetTop)
        }
        // this.tabfixed = -position.y >= (this.$refs.tabcontrol.$el.offsetTop);

      },
      pullingUp() {
        this.getGoods(this.tabcontrol)
        this.$refs.bscroll.finishpullup()

        this.$refs.bscroll.refresh()
      },

    },
  }
</script>

<style scoped>
  #home {
    position: relative;
    height: 100vh;
    /* padding-top: 44px; */
  }

  .isfixed {
    position: fixed;
    top: 44px;
    background-color: #fff;
    z-index: 999;
  }

  .bscroll {
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
    /* height: calc(100% - 44px); */
    overflow: hidden;
  }

  .tabfixed {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 2;
  }
</style>